<template>
  <el-collapse-item name="base">
    <template slot="title">
      <PartitionTitle title="工单基础信息"></PartitionTitle>
    </template >

    <el-form :model="form" :rules="rules" ref="ruleForm" :disabled='mode == "history" ? true : false' label-width="120px" class="presc-detail">
      <template>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="工单编号" :prop='mode == "add" ? "erpOrderNo" : ""'>
              <el-input type="text" v-model="form.erpOrderNo" :disabled='mode != "add"' placeholder="请输入工单编号"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="所属工厂" :prop='mode == "add" ? "factoryDeptCode" : ""'>
              <el-select
                disabled
                v-model="form.factoryDeptCode"
                placeholder="请选择工厂"
                size="small"
                clearable
                @change="handleFactory"
              >
                <el-option
                  v-for="item in factoryList"
                  :key="item.factoryDeptCode"
                  :label="item.factoryName"
                  :value="item.factoryDeptCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="处方" :prop='mode == "add" ? "prescNo" : ""'>
              <el-input type="text" v-model="form.prescNo" placeholder="请选择处方"  :disabled='mode != "add"' readonly>
                <el-button slot="append" icon="el-icon-search" @click="openPrescDialog" :disabled='mode != "add"'></el-button>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="所属车间" :prop='mode == "add" ? "workshopId" : ""'>
              <el-select
                :disabled='mode != "add"'
                v-model="form.workshopId"
                placeholder="请选择车间"
                size="small"
                clearable
                @clear="handleClear"
                @change="handleWorkshop"
              >
                <el-option
                  v-for="item in workshopList"
                  :key="item.workshopId"
                  :label="item.workshopName"
                  :value="item.workshopId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="所属产线" :prop='mode == "add" ? "lineId" : ""'>
              <el-select
                :disabled='mode != "add"'
                v-model="form.lineId"
                placeholder="请选择产线"
                size="small"
                clearable
              >
                <el-option
                  v-for="item in lineList"
                  :key="item.lineId"
                  :label="item.lineName"
                  :value="item.lineId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="所属班组" :prop='mode == "add" ? "groupId" : ""'>
              <el-select
                :disabled='mode != "add"'
                placeholder="请选择班组"
                clearable
                v-model="form.groupId"
                size="small"
              >
                <el-option
                  v-for="item in groupList"
                  :key="item.id"
                  :label="item.erpWorkGroupDesc"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="计划开始时间" :prop='mode == "add" ? "planStarttime" : ""'>
              <el-date-picker
                :disabled='mode != "add"'
                clearable
                v-model="form.planStarttime"
                type="datetime"
                placeholder="选择计划开始时间"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="计划完成时间" :prop='mode == "add" ? "planEndtime" : ""'>
              <el-date-picker
                :disabled='mode != "add"'
                clearable
                v-model="form.planEndtime"
                type="datetime"
                placeholder="选择计划完成时间"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" v-if='mode != "add"'>
          <el-col :span="12">
            <el-form-item label="实际开始时间" :prop='mode == "update" || mode == "confirm" ? "actualStarttime" : ""'>
              <el-date-picker
                :disabled='mode != "update" && mode != "confirm"'
                clearable
                v-model="form.actualStarttime"
                type="datetime"
                placeholder="选择实际开始时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="handleActualTime">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if='mode == "update" || mode == "history"'>
            <el-form-item label="实际完成时间" :prop="mode == 'update' ? 'actualEndtime' : ''">
              <el-date-picker
                clearable
                v-model="form.actualEndtime"
                type="datetime"
                placeholder="选择实际完成时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="handleActualTime">
              </el-date-picker>
            </el-form-item>
          </el-col>
          
          <el-col :span="12" v-if='mode == "confirm" || mode == "cancel"'>
            <el-form-item label="工单顺序" prop="orderSn">
              <el-input-number v-model="form.orderSn" :disabled='mode == "cancel"' :min="0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" v-if='mode == "update"'>
          <el-col :span="12">
            <el-form-item label="工单顺序" prop="orderSn">
              <el-input-number v-model="form.orderSn" :disabled='mode == "cancel"' :min="0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </el-form>

    <presc-dialog
      :multiple="false"
      :visible.sync="prescData.visible"
      :defaultValues="prescData.selectPrescLst"
      @closeDialog="closePrescDialog"
    />
  </el-collapse-item>
</template>
<script>
  import prescDialog from "./prescDialog";
  import { mapState,mapActions,mapGetters} from "vuex";
export default {
  props:{
    mode:{
      type:String,
      default:""
    },
    orderDetail:{
      type:Object,
      default:()=>{}
    }
  },

  data() {
    const validprescNo = (rule,value, callback) => {
      if(!this.form.prescNo){
        return callback(new Error("请选择处方"));
      }else{
        callback();
      }
    };
    const validActualEndtime= (rule,value, callback) => {
      if(!value){
        return callback(new Error("请选择实际完成时间"));
      }else{
        if(new Date(this.form.actualEndtime).getTime() < new Date(this.form.actualStarttime).getTime()){
          return callback(new Error("实际完成时间不得早于实际开始时间"));
        }else{
          callback();
        }
      }
    };
    const validPlanEndtime= (rule,value, callback) => {
      if(!value){
        return callback(new Error("请选择计划完成时间"));
      }else{
        if(new Date(this.form.planEndtime).getTime() < new Date(this.form.planStarttime).getTime()){
          return callback(new Error("计划完成时间不得早于计划开始时间"));
        }else{
          callback();
        }
      }
    };
    return {
      factoryList:[],
      workshopList:[],
      lineList:[],
      form:{
        erpOrderNo:null,
        factoryDeptCode:null,
        factoryDeptId:null,
        workshopId:null,
        lineId:null,
        groupId:null,
        prescNo:null,
        prescId:null,
        planStarttime:null,
        planEndtime:null,
        actualStarttime:null,
        actualEndtime:null,
        orderSn:null
      },
      prescData:{
        row:null,
        selectPrescLst:[],
        disabledUser:[],
        visible:false
      },
      isShowDiv:false,
      rules: {
        erpOrderNo: [
          { required: true, message: "请输入工单编号", trigger: "blur" },
        ],
        factoryDeptCode:[
          {required: true,message: "请选择所属工厂", trigger: "change" }
        ],
        workshopId:[
          {required: true,message: "请选择所属车间", trigger: "change" }
        ],
        lineId:[
          {required: true,message: "请选择所属产线", trigger: "change" }
        ],
        prescNo:[
          {required: true,validator: validprescNo, trigger: "change" }
        ],
        groupId:[
          {required: true,message: "请选择所属班组", trigger: "change" }
        ],
        planStarttime:[
          {required: true,message: "请选择计划开始时间", trigger: "change" }
        ],
        planEndtime:[
          {required: true,validator: validPlanEndtime, trigger: "change" }
        ],
        actualStarttime:[
          {required: true,message: "请选择实际开始时间", trigger: "change" }
        ],
        actualEndtime:[
          {required: true,validator: validActualEndtime, trigger: "change" }
        ]
      }
    };
  },

  computed:{
    ...mapState({
      groupList: (state) => state.common.groupList
    }),
    ...mapGetters([
      'baseDeptCode',
      'permitList',
      'allList'
    ]),
    // pickerPlanOptions(){
    //   let that = this;
    //   return {
    //     disabledDate:(date) =>{
    //     	return date.getTime() < new Date(that.form.planStarttime).getTime();
    //     }
    //   }
    // },
    // pickerActualOptions(){
    //   let that = this;
    //   return {
    //     disabledDate:(date) =>{
    //     	return date.getTime() < new Date(that.form.actualStarttime).getTime();
    //     }
    //   }
    // }
  },

  beforeUpdate(){
    this.factoryList = [...this.allList];
    if(this.form?.factoryDeptCode){
      this.handleFactory(this.form.factoryDeptCode)
    }
    if(this.form?.workshopId){
      this.handleWorkshop(this.form.workshopId)
    }
  },

  methods:{
    openPrescDialog() {
      this.prescData.selectPrescLst = [];
      const { prescNo, prescId } = this.form;
      if(prescId){
        this.prescData.selectPrescLst = [
          {
            erpPrescNo:prescNo,
            erpPrescId:prescId
          },
        ];
      }
      this.prescData.visible = true;
    },

    closePrescDialog(list){
      if(list?.length){
        this.form.prescNo = list[0].erpPrescNo;
        this.form.prescId = list[0].erpPrescId;
        this.form.formulaId = list[0].erpFormulaId;
        this.form.factoryDeptCode = list[0].factoryDeptCode;
        // this.form.lineId = list[0].lineId;
        // this.form.groupId = list[0].groupId;
        this.$emit("getPrescDetail",list[0].id);
      }else{
        this.form.prescNo = null;
        this.form.prescId = null;
        this.form.formulaId = null;
      }
    },

    //选择工厂,获取车间数据
    handleFactory(val){
      const factoryItem = this.factoryList && this.factoryList.find(ele => ele.factoryDeptCode === val);
      this.workshopList = factoryItem?.workshopVos ? factoryItem?.workshopVos : [];
      this.form.factoryDeptId = factoryItem?.factoryDeptId;
    },

    //选择车间,获取产线数据
    handleWorkshop(val){
      const workshopItemn = this.workshopList && this.workshopList.find(ele => ele.workshopId === val);
      this.lineList = workshopItemn?.productionLineVos ? workshopItemn?.productionLineVos : [];
    },

    handleClear(){
      this.form.lineId = null;
    },

    resetFormData() {
      this.$refs.ruleForm?.resetFields()
      this.form = {
        erpOrderNo:null,
        factoryDeptCode:null,
        factoryDeptId:null,
        workshopId:null,
        lineId:null,
        groupId:null,
        prescNo:null,
        prescId:null,
        planStarttime:null,
        planEndtime:null,
        actualStarttime:null,
        actualEndtime:null,
        orderSn:null
      };
    },

    // 修改实际开始/结束实际
    handleActualTime() {
      this.$emit("actual-time-change",this.form)
    }
  },

  watch:{
    orderDetail:{
      handler(item){
        if(item){
          this.form.erpOrderNo = item?.erpOrderNo;
          this.form.factoryDeptCode = item?.factoryDeptCode;
          this.form.factoryDeptId = item?.factoryDeptId;
          this.form.workshopId = item?.workshopId;
          this.form.lineId = item?.lineId;
          this.form.groupId = item?.groupId;
          this.form.prescNo = item?.prescNo;
          this.form.prescId = item?.prescId;
          this.form.planStarttime = item?.planStarttime;
          this.form.planEndtime = item?.planEndtime;
          this.form.actualStarttime = this.form.actualStarttime ? this.form.actualStarttime : item?.actualStarttime;
          this.form.actualEndtime = this.form.actualEndtime ? this.form.actualEndtime : item?.actualEndtime;
          this.form.orderSn = (Number(this.form.orderSn) + 1) > 1 ? this.form.orderSn : item?.orderSn;
        };
        this.form.factoryDeptCode = this.baseDeptCode;
        // if(this.mode == "update"){
        //   this.form.actualEndtime = this.form.actualEndtime ? this.form.actualEndtime : this.parseTime(new Date());
        // }
        this.factoryList = [...this.allList];
        if(this.form?.factoryDeptCode){
          this.handleFactory(this.form.factoryDeptCode)
        }
        if(this.form?.workshopId){
          this.handleWorkshop(this.form.workshopId)
        }
      },
      deep: true,
      immediate: true
    },
    "form.actualEndtime"(newVal){
      if(!newVal){
        if(this.mode == "update"){
          this.form.actualEndtime = this.parseTime(new Date())
        }
      }
    }
  },

  components:{
    prescDialog
  }
};
</script>
<style lang="scss" scoped>
.block-title {
  margin-bottom: 0;
}
.el-form {
  .el-date-editor.el-input,
  .el-select {
    width: 100%;
  }
}
.presc-detail{
  ::v-deep .el-dialog .el-dialog__body{
    max-height: calc(100vh - 6rem);
  }
}

</style>
